<template>
  <basic-container>


    <p>在线人数: </p>
    <div id="message">
      {{onlineNum}}
    </div>

  </basic-container>
</template>

<script>
    import {mapGetters} from "vuex";
    import {setMessageInnerHTML, closeWebSocket, send} from "@/api/desk/todolist";

    export default {
        name: "wel",
        data() {
            return {
                activeNames: ['1', '2', '3', '5'],
                logActiveNames: ['1', '2', '3', '4'],
                onlineNum: 0,
            };
        },
        computed: {
            ...mapGetters(["userInfo"]),
        },
        created() {
            this.componentDidMount();
        },
        methods: {
            handleChange(val) {
                console.log(val);
            },
            componentDidMount(){
                var websocket = null;

                //判断当前浏览器是否支持WebSocket
                if ('WebSocket' in window) {
                    websocket = new WebSocket("ws://localhost:2828/api/websocket");
                } else {
                    alert('Not support websocket')
                }

                //连接发生错误的回调方法
                websocket.onerror = function () {
                    setMessageInnerHTML("error");
                };

                //连接成功建立的回调方法
                websocket.onopen = function (event) {
                    setMessageInnerHTML("open");
                }

                //接收到消息的回调方法
                websocket.onmessage = function (event) {
                    setMessageInnerHTML(event.data);
                    this.onlineNum = event.data;
                }

                //连接关闭的回调方法
                websocket.onclose = function () {
                    setMessageInnerHTML("close");
                }
                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = function () {
                    websocket.close();
                }
            }
        }
    };
</script>

